<template>
  <div id="addPictureBatchPage" class="container mx-auto px-4 py-8 bg-gray-50 min-h-screen">
    <div class="max-w-2xl mx-auto">
      <!-- 页面标题 -->
      <div class="mb-8 animate-fade-in">
        <h2 class="text-2xl font-semibold text-gray-800">批量创建图片</h2>
        <p class="mt-2 text-gray-500 text-sm">通过关键词批量抓取并创建图片</p>
      </div>

      <!-- 表单区域 -->
      <a-form
        layout="vertical"
        :model="formData"
        @finish="handleSubmit"
        class="bg-white rounded-xl border border-gray-100 shadow-sm p-6 animate-slide-up"
      >
        <a-form-item
          label="关键词"
          name="searchText"
          :rules="[{ required: true, message: '请输入搜索关键词' }]"
          class="transition-all duration-300 hover:bg-gray-50 p-1 rounded-md"
        >
          <a-input
            v-model:value="formData.searchText"
            placeholder="请输入搜索关键词（如：自然风光、科技产品）"
            allow-clear
            class="transition-all duration-200 focus:ring-2 focus:ring-gray-200 focus:border-gray-300"
          />
        </a-form-item>

        <a-form-item
          label="抓取数量"
          name="count"
          :rules="[{ required: true, message: '请输入抓取数量' }]"
          class="transition-all duration-300 hover:bg-gray-50 p-1 rounded-md"
        >
          <a-input-number
            v-model:value="formData.count"
            placeholder="请输入数量"
            style="width: 100%"
            :min="1"
            :max="30"
            :step="1"
            allow-clear
            class="transition-all duration-200 focus:ring-2 focus:ring-gray-200 focus:border-gray-300"
          />
          <p class="mt-1 text-xs text-gray-500">最多支持一次抓取30张图片</p>
        </a-form-item>

        <a-form-item
          label="起始位置"
          name="start"
          :rules="[{ required: true, message: '请输入起始位置' }]"
          class="transition-all duration-300 hover:bg-gray-50 p-1 rounded-md"
        >
          <a-input-number
            v-model:value="formData.start"
            placeholder="请输入起始位置"
            style="width: 100%"
            :min="1"
            :step="1"
            allow-clear
            class="transition-all duration-200 focus:ring-2 focus:ring-gray-200 focus:border-gray-300"
          />
          <p class="mt-1 text-xs text-gray-500">
            控制从第几张图片开始抓取，避免重复。例如上次抓取到30张，本次可从31开始
          </p>
        </a-form-item>

        <a-form-item
          label="名称前缀"
          name="namePrefix"
          class="transition-all duration-300 hover:bg-gray-50 p-1 rounded-md"
        >
          <a-input
            v-model:value="formData.namePrefix"
            placeholder="请输入名称前缀，会自动补充序号（不填则使用关键词）"
            allow-clear
            class="transition-all duration-200 focus:ring-2 focus:ring-gray-200 focus:border-gray-300"
          />
        </a-form-item>

        <a-form-item class="pt-4">
          <a-button
            type="primary"
            html-type="submit"
            style="width: 100%"
            :loading="loading"
            class="bg-gray-800 hover:bg-gray-900 text-white border-0 h-11 text-base transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-md"
          >
            <template v-if="!loading">执行批量创建</template>
            <template v-if="loading">
              <a-spin size="small" class="mr-2" />
              执行中...
            </template>
          </a-button>
        </a-form-item>
      </a-form>

      <!-- 帮助提示 -->
      <div class="mt-6 bg-gray-50 border border-gray-100 rounded-lg p-4 text-sm text-gray-600 animate-slide-up" style="animation-delay: 0.1s">
        <h4 class="font-medium text-gray-700 mb-2">使用提示</h4>
        <ul class="list-disc pl-5 space-y-1">
          <li>相同关键词多次抓取时，请调整起始位置避免重复</li>
          <li>建议每次抓取间隔10秒以上，避免请求过于频繁</li>
          <li>抓取结果取决于搜索引擎返回内容，可能与预期有差异</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import {pictureUploadByBatchUsingPost} from '@/api/pictureController.ts'
import { useRouter } from 'vue-router'

// 表单数据
const formData = reactive<API.PictureUploadByBatchRequestDTO>({
  count: 10,
  start: 1, // 默认从第1张开始
})

// 状态管理
const loading = ref(false)
const router = useRouter()

/**
 * 提交表单处理
 */
const handleSubmit = async () => {
  loading.value = true
  try {
    // 基本参数校验
    if (!formData.searchText) {
      message.error('请输入搜索关键词')
      return
    }
    if (!formData.count || formData.count < 1 || formData.count > 30) {
      message.error('请输入1-30之间的抓取数量')
      return
    }
    if (!formData.start || formData.start < 1) {
      message.error('请输入大于等于1的起始位置')
      return
    }

    // 调用接口
    const res = await pictureUploadByBatchUsingPost(formData)

    // 处理结果
    if (res.data.code === 0 && res.data.data !== undefined) {
      const successCount = res.data.data
      message.success(`批量创建成功，共抓取到 ${successCount} 张图片`)

      // 计算下次建议起始位置
      const nextStart = formData.start + formData.count
      message.info(`下次爬取${formData.searchText}建议起始位置：${nextStart}`, 5)

      // 延迟跳转，让用户看到结果
      setTimeout(() => {
        router.push('/')
      }, 1500)
    } else {
      message.error(`创建失败：${res.data.message || '未知错误'}`)
    }
  } catch (e: any) {
    message.error(`操作失败：${e.message || '网络错误'}`)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
#addPictureBatchPage {
  padding-top: 32px;
  padding-bottom: 64px;
}

/* 动画定义 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out forwards;
  opacity: 0;
}

/* Ant Design 4.x 样式调整 */
::v-deep .ant-form {
  background-color: #ffffff;
}

::v-deep .ant-form-item-label > label {
  color: #4b5563;
  font-weight: 500;
  font-size: 14px;
}

::v-deep .ant-input,
::v-deep .ant-input-number {
  border-color: #e5e7eb;
  border-radius: 6px;
  transition: all 0.2s ease;
}

::v-deep .ant-input:focus,
::v-deep .ant-input-number:focus,
::v-deep .ant-input-number-focused {
  border-color: #9ca3af;
  box-shadow: 0 0 0 2px rgba(209, 213, 219, 0.5);
}

::v-deep .ant-btn-primary {
  background-color: #1f2937;
  border-color: #1f2937;
}

::v-deep .ant-btn-primary:hover {
  background-color: #111827;
  border-color: #111827;
}

/* 响应式调整 */
@media (max-width: 768px) {
  #addPictureBatchPage {
    padding: 20px 12px 40px;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  ::v-deep .ant-form {
    padding: 16px;
  }

  ::v-deep .ant-form-item {
    margin-bottom: 16px;
  }
}
</style>
